<template>
  <div class="container">
    <el-form
      :model="fromData"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题:" prop="title">
        <el-col :span="12">
          <el-input v-model="fromData.title" maxlength="200" show-word-limit></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="攻略描述:" prop="address">
        <el-col :span="12">
          <el-select v-model="fromData.address">
            <el-option
              :key="item.id"
              :value="item.value"
              :label="item.label"
              v-for="item in address_list"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="是否发布:" prop="isFlag">
        <el-col :span="12">
          <el-select v-model.number="fromData.isFlag">
            <el-option
              :key="item.id"
              :value="item.value"
              :label="item.label"
              v-for="item in flag_list"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="攻略详情:" prop="context" required>
        <WangEditor :editorDetail="fromData.context" ref="editor" v-if="isRender" />
        <!-- this.$refs.editor.getEditorData() 获取富文本的内容 -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validPrice } from "@/utils/validate";
import WangEditor from "@/components/WangEditor";
import { add_strategy, query_article, edit_article } from "@/api/strategy";
export default {
  components: {
    WangEditor
  },

  data() {
    return {
      fromData: {
        title: "", // 攻略标题
        address: "0", // 攻略位置
        context: "", // 攻略详情
        isFlag: 0,
        
      },
      isRender: true,
      isEdit: false, //是否编辑
      article_id: "", //文章ID
      flag_list: [
        { id: 0, label: "不发布", value: 0 },
        { id: 1, label: "发布", value: 1 }
      ],
      address_list: [
        { id: 0, label: "热门攻略", value: "0" },
        { id: 1, label: "最佳攻略", value: "1" },
        { id: 2, label: "最新攻略", value: "2" }
      ],

      rules: {
        title: [{ required: true, message: "请输入攻略标题", trigger: "blur" }],
        address: [
          { required: true, message: "请填写攻略描述", trigger: "blur" }
        ],
        context: [{ require: true, message: "请填写攻略详情", trigger: "blur" }]
      }
    };
  },
  methods: {
    //  查询文章
    queryArticle() {
      query_article({ id: this.article_id }).then(res => {
        if (res.code == 0) {
          this.fromData = res.data[0];
        }
      });
    },
    // 点击提交按钮
    submitForm(formName) {
      this.getData();
      this.$refs[formName].validate(valid => {
        if (valid) {
          this["fromData"].uid = this.$store.state.user.uid;
          if (this.isEdit) {
            edit_article(this.fromData).then(res => {
              if (res.code == 0) {
                this.$message({
                  msg: "修改成功",
                  type: "success"
                });
              }
            });
          } else {
            add_strategy(this.fromData).then(res => {
              if (res.code == 0) {
                this.resetForm(formName); // 清除数据

                this.$message({
                  message: res.msg,
                  type: "success"
                });
              }
            });
          }
        } else {
          // console.log();
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 点击重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.isRender = false;
      this.$nextTick(() => {
        this.isRender = true;
      });
      // console.log(this.$refs.editor);
      // this.$refs.editor.editorData = null;
    },
    // 获取数据
    getData() {
      this.fromData.context = this.$refs.editor.getEditorData();
    }
  },
  computed: {},
  mounted() {
    let { id, isEdit } = this.$route.query;

    isEdit == 1 ? (this.isEdit = true) : (this.isEdit = false);
    this.article_id = id;
    if (isEdit == 1) {
      this.queryArticle();
    }
    // console.log(id, isEdit);
  }
};
</script>
<style lang="scss" scoped>
.demo-input-suffix {
  display: flex;
  align-items: center;
  > .el-input {
    width: 70%;
    margin-left: 10px;
  }
}

#map {
  width: 100%;
  height: 155px;
  border: 1px solid #ddd;
  margin-top: 10px;
}
</style>
